<template>
    <div name="show">
        <ul class="goodList">
            <li v-for="goods in list">
                <!-- v-bind 是属性绑定，这里绑定的是src属性-->
                <img v-bind:src="goods.img">
                <p>{{goods.goodName}}</p>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "show",
        data() {
            // 初始化代码
            var obj = this;
            var url;
            if (obj.goodId == 1) {
                url = "json/bjb.json"
            } else if (obj.goodId == 2) {
                url = "json/shouji.json"
            }
            this.$http.get(url).then(function (res) {
                obj.list = res.data;
            })
            return {
                list: []
            }

        },
        props: {
            // 调用组件时定义了goodId
            goodId: Number
        },
        /* 监听传递的参数 */
        watch: {
            goodId() {
                var obj = this;
                var url = "";
                if (obj.goodId == 1) {
                    url = "json/bjb.json"
                } else if (obj.goodId == 2) {
                    url = "json/shouji.json"
                }
                this.$http.get(url).then(function (res) {
                    obj.list = res.data;
                })
                return {
                    list: []
                }
            }
        }

    }
</script>

<style scoped>
    .goodList li {
        width: 190px;
        height: 190px;
        list-style: none;
        float: left;
        font-size: 9px;
        color: red;
        margin-bottom: 30px;
    }

    .goodList img {
        width: 180px;
        height: 180px;
    }
</style>
